<template>
	<div class="app-container tz-app">
		<div class="zt-select flex-s">
			<div class="flex-left">

				<!-- 
           <el-select v-model="queryParams.antennaName" filterable placeholder="天线" class="zt-input rihgt-m5">
          <el-option v-for="item in  dict.type.antenna_type" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.antennaName" filterable placeholder="台站" class="zt-input-min rihgt-m5">
          <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.antennaName" filterable placeholder="电台" class="zt-input-min rihgt-m5">
          <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
          </el-option>
        </el-select> -->
				<!-- <button class="bt-blue " @click="handleQuery">筛选</button> -->

			</div>
			<button class="bt-yellow " @click="handleAdd">新增</button>

		</div>



		<div class="tz-table-box" style="height:calc(100vh - 250px);">
			<el-table v-loading="loading" :data="antennaList" @selection-change="handleSelectionChange"
				height="calc(100vh - 250px)" class="zt-table">
				<el-table-column type="index" width="50"> </el-table-column>
				<!-- <el-table-column show-overflow-tooltip label="天线ID" align="center" prop="antennaId" /> -->
				<el-table-column show-overflow-tooltip label="天线名称" align="center" prop="antennaName" />
				<!-- <el-table-column show-overflow-tooltip label="天线编码" align="center" prop="antennaCode" /> -->
				<el-table-column show-overflow-tooltip label="天线类型" align="center" prop="antennaType">
					<template slot-scope="scope">
						<!-- {{ dict.type.located_address[scope.row.locatedAddress].label }}  -->
						{{ getAntennaType(scope.row.antennaType) }}
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="所属位置" align="center" prop="locatedAddress">
					<template slot-scope="scope">
						<!-- {{ dict.type.located_address[scope.row.locatedAddress].label }}  getAntennaType-->
						{{ getLocatedAddress(scope.row.locatedAddress) }}
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="室内外" align="center" prop="inoutType">
					<template slot-scope="scope">
						{{ getInoutType(scope.row.inoutType) }}
					</template>
				</el-table-column>
				<!-- <el-table-column show-overflow-tooltip label="所属机房" align="center" prop="radioStationName"/> -->
				<el-table-column show-overflow-tooltip label="所属台站" align="center" prop="regionalNodeName" />
				<el-table-column show-overflow-tooltip label="使用状态" align="center" prop="isUsed"
					:formatter="(row, column, cellValue, index) => cellValue == '1' ? '已使用' : '未使用'" />
				<el-table-column show-overflow-tooltip label="状态" align="center" prop="status">
					<template slot-scope="scope">
						<div :class="scope.row.status == 1 ? 'red' : ''">{{ scope.row.status == 1 ? '故障' : '正常' }}</div>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="操作" align="center" class-name="small-padding fixed-width"
					width="120px">
					<template slot-scope="scope">
						<div class="flex-s">
							<img src="@/assets/images/antennadss.png"
								v-if="scope.row.status == 0 && getAntennaType(scope.row.antennaType).indexOf('旋转') >= 0"
								style="width: 20px;height: 20px;cursor: pointer;margin-right: 20px;"
								@click="handleAntennaScope(scope.row)" title="转动" />
							<img src="@/assets/images/tx.png" v-else
								style="width: 20px;height: 20px;margin-right: 20px;"
								@click="handleAntennaScope(scope.row)" title="转动" />
							<img src="@/assets/images/amend.png"
								style="width: 20px;height: 20px;cursor: pointer;margin-right: 20px;"
								@click="handleUpdate(scope.row)" title="编辑" />
							<img src="@/assets/images/delete-bin2.png" style="width: 20px;height: 20px;cursor: pointer;"
								@click="handleDelete(scope.row)" title="删除" />
						</div>
					</template>
				</el-table-column>
			</el-table>

		</div>


		<div class="zt-pagination">
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @pagination="getList" />
		</div>




		<!-- 添加或修改天线对话框 -->
		<right-dialog :title="title" :visible="open" @closeDialog="cancel">
			<template v-slot:default>
				<div class="zt-dialog-solt">
					<el-form ref="form" :model="form" :rules="rules" label-width="120px">
						<el-form-item label="天线名称:" prop="antennaName">
							<div class="flex">
								<el-input class="blue-input" v-model="form.antennaName" placeholder="请输入天线名称" />
								<el-button class="bt-blue " @click="submitForm" style="margin-left: 10px; ">{{ title ==
				'添加天线' ? '添加' :
				'确定'
									}}</el-button>
							</div>
						</el-form-item>

						<div class="flex">
							<el-form-item label="类型:" prop="antennaType">
								<el-select v-model="form.antennaType" filterable placeholder="类型"
									class="zt-input-min rihgt-m5">
									<el-option v-for="item in  dict.type.antenna_type" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>

							<el-form-item label="所属地:" prop="locatedAddress">
								<el-select v-model="form.locatedAddress" filterable placeholder="所属地"
									class="zt-input-min rihgt-m5">
									<el-option v-for="item in  dict.type.located_address" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="所属台站:">
								<el-select v-model="form.regionalNodeId" filterable placeholder="所属台站"
									class="zt-input-min rihgt-m5">
									<el-option v-for="item in  nodeList" :key="item.regionalNodeId"
										:label="item.regionalNodeName" :value="item.regionalNodeId" />
								</el-select>
							</el-form-item>
						</div>

						<div class="flex">
							<el-form-item label="室内外:" prop="inoutType">
								<el-select v-model="form.inoutType" filterable placeholder="室内外"
									class="zt-input-min rihgt-m5">
									<el-option v-for="item in  dict.type.inout_type" :key="item.value"
										:label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="供应商:">
								<el-input class="zt-input-min" v-model="form.supplier" placeholder="请输入供应商" />
							</el-form-item>
							<el-form-item label="出厂日期:">
								<el-date-picker class="zt-input-min" style="width: 100%;" value-format="yyyy-MM-dd"
									v-model="form.deliveryTime" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</div>
						<el-form-item label="备注:" prop="remark">
							<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
						</el-form-item>
					</el-form>

				</div>

			</template>
		</right-dialog>


		<!-- 修改天线数据 -->
		<right-dialog :title="antennaScope.title" :visible="antennaScope.open" @closeDialog="cancelAntenna"
			class="antennaScope">
			<template v-slot:default>
				<div class="zt-dialog-solt">
					<compass :angle="antennaScope.form.rotation" @upAngle="upAngle"></compass>
					<div
						style="background: #394760;width: 360px;height: 40px;margin-top: 1px;text-align: center;line-height: 40px;color:#EDEDED;font-size: 18px;">
						当前状态：
						<span style="color:#74C8CE ;" v-show="antennaScope.form.status == 0">正常</span>
						<span style="color:red ;" v-show="antennaScope.form.status == 1">异常</span>
					</div>
					<div class="flex" style="margin-top: 20px;">
						<el-button class="bt-blue " @click="antennaStart" style="margin-left: 140px; ">转动</el-button>
						<el-button class="bt-yellow " @click="antennaStop" style="margin-left: 20px; ">停止</el-button>
						<!-- <div @click="antennaZero"
              style="margin-left: 20px;border-radius: 101px; border: solid 1px #2CA6E0; color: #2CA6E0; width: 90px;height: 36px;line-height: 35px;text-align: center;cursor: pointer;">
              校零</div> -->
					</div>



				</div>

			</template>
		</right-dialog>


	</div>
</template>

<script>
import { listAntenna, getAntenna, delAntenna, addAntenna, updateAntenna, postAntennaZero, postAntennaStop, postAntennaStart } from "@/api/business/antenna";
import RightDialog from "@/components/TZ/RightDialog"
import Compass from "@/components/TZ/Compass"
import { getlistNode } from "@/api/business/node";

export default {
	components: { RightDialog, Compass },
	name: "Antenna",
	dicts: ['antenna_type', 'located_address', 'inout_type'],
	data() {
		return {
			// 台站列表
			nodeAllList: [],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 天线表格数据
			antennaList: [],
			// 弹出层标题
			title: "",
			// 弹出类型
			openType: false,
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				antennaCode: null,
				antennaType: null,
				locatedAddress: null,
				status: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				antennaName: [
					{ required: true, message: "天线名称不能为空", trigger: "change" }
				],
				antennaCode: [
					{ required: true, message: "天线编码不能为空", trigger: "change" }
				],
				antennaType: [
					{ required: true, message: "天线类型不能为空", trigger: "change" }
				],
				locatedAddress: [
					{ required: true, message: "所属位置不能为空", trigger: "change" }
				],
				status: [
					{ required: true, message: "状态不能为空", trigger: "change" }
				],
				inoutType: [
					{ required: true, message: "室内外不能为空", trigger: "change" }
				],
			},
			type: [{
				value: 0,
				label: '1'
			}, {
				value: 1,
				label: '天线'
			}, {
				value: 2,
				label: '2'
			}, {
				value: 3,
				label: '3'
			}, {
				value: 4,
				label: '天下七七'
			}],
			antennaScope: {
				form: {
					antennaeId: null,
					rotation: 0,
					code: null,
					status: null,
				},
				open: false,
				title: "天线"
			}
		};
	},
	watch: {
		// // 监听表单数据变化
		// form: {
		// 	handler(val) {
		// 		if(this.$refs["form"])
		// 		this.$refs["form"].validate(valid => {
		// 		});
		// 	},
		// 	deep: true
		// }

	},
	created() {
		this.getList();
		this.getNode();
	},
	computed: {
		nodeList() {
			return this.nodeAllList.filter(item => item.locatedAddress == this.form.locatedAddress)
		},
	},
	methods: {
		/** 查询台站列表 */
		getNode() {
			getlistNode().then(rs => {
				this.nodeAllList = rs.rows
			});
		},
		/** 查询天线列表 */
		getList() {
			this.loading = true;
			listAntenna(this.queryParams).then(response => {
				this.antennaList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		upAngle(val) {
			this.antennaScope.form.rotation = val * 1
			console.log(this.antennaScope.form.rotation);
		},
		handleAntennaScope(row) {
			if (row.status == 1) {
				// this.$modal.msgSuccess("禁止使用");
				// this.$message.warning('禁止使用');
				return

			}
			this.resetAntenna()
			this.reset();
			const antennaId = row.antennaId || this.ids
			getAntenna(antennaId).then(response => {
				this.form = response.data;
				this.antennaScope.form.antennaeId = this.form.antennaeId
				this.antennaScope.form.rotation = this.form.antennaAngle * 1
				this.antennaScope.form.status = this.form.status
				this.antennaScope.open = true
			});
		},
		cancelAntenna() {
			this.antennaScope.open = false
		},
		resetAntenna() {
			this.antennaScope.form = {
				antennaeId: null,
				rotation: 0,
				status: null,
			}
		},
		// 表单重置
		reset() {
			this.form = {
				antennaId: null,
				antennaName: null,
				antennaCode: null,
				antennaType: null,
				locatedAddress: null,
				status: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				remark: null,
				inoutType: null,
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			console.log(this.dict.type);
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.antennaId)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加天线";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const antennaId = row.antennaId || this.ids
			getAntenna(antennaId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "编辑天线";
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.antennaId != null) {
						updateAntenna(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addAntenna(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const antennaIds = row.antennaId || this.ids;
			this.$modal.confirm('是否确认删除电台编号为"' + antennaIds + '"的数据项？').then(function () {
				return delAntenna(antennaIds);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => { });
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('system/antenna/export', {
				...this.queryParams
			}, `antenna_${new Date().getTime()}.xlsx`)
		},
		getLocatedAddress(index) {
			const entries = this.dict.type.located_address;
			for (let i = 0; i < entries.length; i++) {
				if (entries[i].value == index) {
					return entries[i].label
				}
			}
			return ""
		},
		getAntennaType(index) {
			const entries = this.dict.type.antenna_type;
			for (let i = 0; i < entries.length; i++) {
				if (entries[i].value == index) {
					return entries[i].label
				}
			}
			return ""
		},
		getInoutType(index) {//室内外
			const entries = this.dict.type.inout_type;
			for (let i = 0; i < entries.length; i++) {
				if (entries[i].value == index) {
					return entries[i].label
				}
			}
			return ""
		},
		//天线转动
		antennaStart() {
			const data = {
				angle: this.antennaScope.form.rotation
			}
			postAntennaStart(data).then(response => {
			});
		},
		//天线停止
		antennaStop() {
			const data = {}
			postAntennaStop(data).then(response => {
			});
		},
		//天线校零
		antennaZero() {
			const data = {}
			postAntennaZero(data).then(response => {
			});
		},
	}
};
</script>
